<template>
    <div class="teacherlist">
        <div class="left">
            <el-input class="input" size="small" placeholder="请输入学校名称" prefix-icon="search" />
            <el-tree :data="data" class="inp" icon="plus" />
        </div>
        <div class="right">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="inp1" placeholder="请输入姓名" />
                </el-form-item>
                <el-form-item>
                    <el-input v-model="inp2" placeholder="请输入账号" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="success" @click="addteacher">新增</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="list" border style="width: 100%" stripe="true">
                <el-table-column label="序号" prop="">
                    <template #default="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="" label="所属学校">
                    <template #default="scope">
                        <span>{{ scope.row.school.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="老师姓名"></el-table-column>
                <el-table-column prop="address" label="性别">
                    <template #default="scope">
                        <span>{{ scope.row.sex == 1 ? '男' : '女' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="工号" />
                <el-table-column prop="" label="所属部门">
                    <template #default="scope">
                        <span>{{ scope.row.dept.name }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="账号" />
            </el-table>
            <el-drawer v-model="drawer" title="新增教师" :with-header="false">
                <el-form label-width="100px" :model="form" style="max-width: 460px" ref="formref">
                    <div style="width: 100%;text-align: center;margin-bottom: 30px;">
                        新增老师
                    </div>
                    <el-form-item label="老师id：">
                        <el-input v-model="form.id" />
                    </el-form-item>
                    <el-form-item label="姓名：">
                        <el-input v-model="form.name" />
                    </el-form-item>
                    <el-form-item label="性别：">
                        <el-input v-model="form.sex" />
                    </el-form-item>
                    <el-form-item label="学校id：">
                        <el-input v-model="form.sId" />
                    </el-form-item>
                    <el-form-item label="部门id：">
                        <el-input v-model="form.deptId" />
                    </el-form-item>
                    <el-form-item label="身份id：">
                        <el-input v-model="form.roleId" />
                    </el-form-item>
                    <el-form-item label="电话号：">
                        <el-input v-model="form.phone" />
                    </el-form-item>
                    <el-form-item label="用户名：">
                        <el-input v-model="form.username" />
                    </el-form-item>
                    <el-form-item label="密码：">
                        <el-input v-model="form.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="tijiao(formref)">确定</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>
        </div>
    </div>
</template>

<script setup lang="ts">
import server from '@/api'
import { ElNotification } from 'element-plus';
import { ref, onMounted } from 'vue'
var list = ref()
var inp1 = ref()
var inp2 = ref()
const drawer = ref(false)
var form = ref({ id: '', name: '', sex: '', sId: '', deptId: '', roleId: '', phone: '', username: '', password: '' })
var formref = ref()
const data = [
    {
        label: '教育局',
        children: [
            {
                label: '小学',
                children: [
                    {
                        label: '智慧校园'
                    },
                    {
                        label: '智慧校园'
                    },
                    {
                        label: '智慧校园'
                    }
                ]
            }
        ]
    }
]
//打开抽屉
var addteacher = () => {
    drawer.value = true
}
//提交新增
var tijiao = async (formel: any) => {
    var res = await server.home.saveTeacher(form.value)
    // console.log(res.data);
    if (res.data.code == 200) {
        ElNotification.success({ message: '新增成功' });
    } else {
        ElNotification.error({ message: '新增失败' });
    }

}
var content: any
onMounted(async () => {
    var res = await server.home.teacher_getTeacherByPage()
    // console.log(res.data.data.data);
    list.value = res.data.data.data
    content = res.data.data.data
})
var onSubmit = () => {
    const kb = JSON.parse(JSON.stringify(content))
    // console.log(kb);
    if (inp1.value) {
        list.value = kb.filter((item: any) => item.name.includes(inp1.value))
    }
    if (inp2.value) {
        list.value = kb.filter((item: any) => item.phone.includes(inp2.value))
    }
    if (inp1.value && inp2.value) {
        list.value = kb.filter((item: any) => item.name.includes(inp1.value) && item.phone.includes(inp2.value))
    }
    if (!inp1.value && !inp2.value) {
        list.value = kb
    }

}
</script>

<style scoped>
.teacherlist {
    width: 100%;
    height: 584px;
    background: #f7f7f7;
    display: flex;
}

.left {
    width: 200px;
    height: 570px;
    margin-right: 15px;
    background: #fff;
    text-align: center;
    padding: 10px;
}

.input {
    margin-bottom: 10px;
}

.el-tree {
    --el-tree-node-hover-bg-color: none
}

.right {
    flex: 1;
    height: 550px;
    background: #fff;
    padding: 40px 20px 0 20px;
    position: relative;
}

.fy {
    position: absolute;
    bottom: 50px;
    right: 50px;
}
</style>